<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>在线OJ系统</title>
    <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Bootstrap 4-->
    <link rel="shortcut icon" href="./img/logo.jpg">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>

    <nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
        <a class="navbar-brand font-weight-bold" href="#">在线OJ</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topMenu"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="topMenu">

        </div>
    </nav>

    <!--hero section-->
    <section class="bg-hero">
        <div class="container">
            <div class="row vh-100">
                <div class="col-sm-12 my-auto text-center">
                    <h1>在线OJ</h1>
                    <p class="lead text-capitalize my-4">
                        基于 JavaServlet 实现的《在线OJ系统》
                    </p>
                    <a href="https://www.baidu.com" class="btn btn-outline-light btn-radius btn-lg">Gitee 链接</a>
                </div>
            </div>
        </div>
    </section>

    <!--components-->
    <section class="my-5 pt-5">
        <div class="container">
            <!-- 表示题目详情页 -->
            <div class="row mb-4">
                <div class="col-sm-12 pb-4">
                    <div class="jumbotron jumbotron-fluid">
                        <div class="container" id="problemDesc">
                            <!-- <h3></h3>
                            <pre></pre> -->
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="codeEditor">代码编辑框</label>
                        <div id="editor" style="min-height:400px;">
                            <textarea class="form-control" id="codeEditor" style="width: 100%; height: 400px"
                                rows="40"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-primary" id="submitButton">提交</button>
            <div class="row mb-4">
                <div class="col-sm-12 pb-4">
                    <div class="jumbotron jumbotron-fluid">
                        <div class="container">
                            <pre id="problemResult">

                            </pre>
                            <!-- <h3></h3>
                            <pre></pre> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--footer-->
    <section class="py-5 bg-dark">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">

                    <p class="pt-2 text-muted">
                        &copy; by 霸王龙骨架带走渡渡鸟
                    </p>
                </div>
            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="js/app.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ace.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ext-language_tools.js"></script>

    <script>
        function initAce() {
            let editor = ace.edit("editor");
            editor.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true
            });
            editor.setTheme("ace/theme/twilight");
            editor.session.setMode("ace/mode/java");
            editor.resize();
            document.getElementById('editor').style.fontSize = '20px';
            return editor;
        }
        let editor = initAce();

        function getProblem() {
            //1.通过ajax从服务器获取到题目详情
            $.ajax({
                url: "problem" + location.search,
                type: "get",
                success: function (data, status) {
                    makeProblemDetail(data);
                }
            })
        }
        function makeProblemDetail(problem) {
            //2.把题干信息写入题目片段
            let problemDesc = document.querySelector("#problemDesc");

            let h3 = document.createElement("h3");
            h3.innerHTML = problem.id + "." + problem.title + "(" + problem.level + ")";
            problemDesc.appendChild(h3);

            let pre = document.createElement("pre");
            let p = document.createElement("p");
            p.innerHTML = problem.description;
            pre.appendChild(p);
            problemDesc.appendChild(pre);

            //3.把代码模板写入代码编辑框
            editor.setValue(problem.templateCode);

            //4.把提交按钮注册成一个点击事件，点击这个按钮就把编辑框的内容提交到服务器上
            let submitButton = document.querySelector("#submitButton");
            submitButton.onclick = function () {
                let body = {
                    id: problem.id,
                    code: editor.getValue(),
                };
                $.ajax({
                    type: "post",
                    url: "compile",
                    data: JSON.stringify(body),
                    success: function (data, status) {
                        let problemResult = document.querySelector("#problemResult");
                        if (data.error == 0) {
                            problemResult.innerHTML = data.stdout;
                        } else {
                            problemResult.innerHTML = data.reason;
                        }
                    }
                });
            }
        }
        getProblem();

    </script>
</body>

</html>